<template>
  <div class="InputBox">
    <van-field
      v-model="result"
      @update:model-value="updateValue"
      :maxlength="inputProps.maxlength"
      :type="inputProps.inputType"
      :is-link="inputProps.isLink"
      :readonly="inputProps.readonly"
      :name="inputProps.name"
      :label="inputProps.label"
      :placeholder="inputProps.placeholder ? inputProps.placeholder : `请输入${inputProps.label}`"
      :rules="[
        {
          required: inputProps.required,
          validator: inputProps.validator ? inputProps.validator : null,
          message: inputProps.errorMessage ? inputProps.errorMessage : `请输入${inputProps.label}`,
        },
      ]"
    />
  </div>
</template>

<script lang="ts" setup>
import { commonTypes } from '@/typings/commonTypes';
import { isEmpty } from '@/utils/common';

import { Cell, CellGroup, Dialog, Step, Steps, Form, Field, Picker } from 'vant';
import type { FormInstance } from 'vant';

//因为这里用了script的setup方式就用不到 defineComponent 这个定义组件的api了
import {
  useSlots,
  useAttrs,
  defineProps,
  onMounted,
  watchEffect,
  ref,
  reactive,
  PropType,
  watch,
  computed,
} from 'vue';

import { useStore } from 'vuex';
const store = useStore<commonTypes.IState>();

//获取到父组件的对象
//var columns = reactive<IgetDetailByNoticeSerialNo.BusObj>({});
const result = ref<string | number | undefined>('');

const init = (newProps: commonTypes.IselectProps) => {
  if (newProps.keyOne && newProps.keyTwo) {
    if (newProps.keyOne == 'patAdmiNote') {
      if (!isEmpty(store.state.form.patAdmiNote)) {
        result.value =
          typeof store.state.form[newProps.keyOne as string][newProps.keyTwo] == 'string' ||
          store.state.form[newProps.keyOne as string][newProps.keyTwo] == null
            ? store.state.form[newProps.keyOne as string][newProps.keyTwo]
            : store.state.form[newProps.keyOne as string][newProps.keyTwo].name;
      } else {
        result.value = '';
      }
    } else {
      result.value =
        typeof store.state.form[newProps.keyOne][newProps.keyTwo] == 'string' ||
        store.state.form[newProps.keyOne][newProps.keyTwo] == null
          ? store.state.form[newProps.keyOne][newProps.keyTwo]
          : store.state.form[newProps.keyOne][newProps.keyTwo].name;
    }
  }
};

const updateValue = (value: string) => {
  console.log('updateValue:', value);
  let payloadItem: commonTypes.IpayloadItem = {
    keyOne: props.inputProps.keyOne,
    keyTwo: props.inputProps.keyTwo,
    valueAndObj: value,
  };
  setTimeout(() => {
    store.dispatch('formItemAction', payloadItem);
  }, 100);
};

//获取子组件传的值
const props = defineProps({
  inputProps: {
    type: Object as PropType<commonTypes.IselectProps>, // type:  Array as () => Array<string>, //(string也可以是其他你自定义的接口)
    required: true,
    default: () => {
      return {};
    },
  },
});

onMounted(() => {
  //console.log('onMounted:', PerSonal.docAdmiNote?.admissionNum);
});

// 1.监听对象 赋值
watch(
  () => props.inputProps,
  (newProps) => {
    init(newProps);
  },
  {
    deep: true, // 深度监听的参数
    immediate: true, //绑定值就开始执行监听
  },
);

//watchEffect 会最先执行
// watchEffect(() => {
// });
</script>

<style scoped lang="scss">
.InputBox {
}
</style>
